<template>
  <canvas id="background"></canvas>
  <div class="login-container">
    <div class="login-box">
      <div class="login-form">
        <h2 class="title">{{ isLogin ? '博客后台管理' : '注册新账户' }}</h2>
        <div class="input-group">
          <label for="username">用户名</label>
          <input id="username" type="text" v-model="username" placeholder="请输入用户名" />
        </div>
        <div class="input-group">
          <label for="password">密码</label>
          <input id="password" type="password" v-model="password" placeholder="请输入密码" />
        </div>
        <div v-if="!isLogin" class="input-group">
          <label for="confirm-password">确认密码</label>
          <input id="confirm-password" type="password" v-model="confirmPassword" placeholder="请再次输入密码" />
        </div>
        <button @click="handleSubmit" :disabled="loading">
          <span class="button-text">{{ loading ? (isLogin ? '登录中...' : '注册中...') : (isLogin ? '登录' : '注册') }}</span>
          <span class="button-icon" :class="{ 'spin': loading }">
            <i class="el-icon-right"></i>
          </span>
        </button>
        <div class="toggle-mode">
          <a href="#" @click.prevent="toggleMode">{{ isLogin ? '没有账户？立即注册' : '已有账户？立即登录' }}</a>
        </div>
      </div>
      <div class="login-image">
        <canvas id="canvas-right"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { login } from '@/api/common/web.js'
import { setToken } from '@/composables/auth.js'
import store from "@/store"
import { router } from '@/router';
import { toast } from '@/composables/util.js'

const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const loading = ref(false);
const isLogin = ref(true);

//清楚表单
const cleanForm= () => {
  isLogin.value = true;
  username.value = '';
  password.value = '';
  confirmPassword.value = '';
}


const handleSubmit = () => {
  if (!username.value || !password.value) {
    ElMessage.warning(isLogin.value ? '请输入用户名和密码' : '请输入用户名、密码和确认密码');
    return;
  }
  if (!isLogin.value && password.value !== confirmPassword.value) {
    ElMessage.warning('两次输入的密码不一致');
    return;
  }
  loading.value = true;

  if(isLogin.value) {
    login({username:username.value, password:password.value}).then((res) => {
      console.log(res)
      if(res.data.code === "200"){
        store.commit('SET_USERINFO',res.data.data)
        setToken(res.data.data.token)
        toast("登录成功!","success")
        router.push("/admin")
      }else{
        toast(res.data.msg,"warning")
      }
      loading.value = false;
    }).catch(err => {
      cleanForm();
      loading.value = false;
    });
  }else{

    //注册之后清除表单
    if (!isLogin.value) {
      isLogin.value = true;
      username.value = '';
      password.value = '';
      confirmPassword.value = '';
    }
  }

};

const toggleMode = () => {
  isLogin.value = !isLogin.value;
  username.value = '';
  password.value = '';
  confirmPassword.value = '';
};

onMounted(() => {
  const canvas = document.getElementById('background');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  function drawCircuit() {
    ctx.strokeStyle = 'rgba(102, 126, 234, 0.1)';
    ctx.lineWidth = 1;

    for (let i = 0; i < 100; i++) {
      ctx.beginPath();
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      ctx.moveTo(x, y);
      ctx.lineTo(x + Math.random() * 100, y + Math.random() * 100);
      ctx.stroke();
    }
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawCircuit();
    requestAnimationFrame(animate);
  }

  animate();

  const canvasRight = document.getElementById('canvas-right');
  const ctxRight = canvasRight.getContext('2d');
  canvasRight.width = 450;
  canvasRight.height = 600;

  function drawPattern() {
    ctxRight.fillStyle = '#f0f0f0';
    ctxRight.fillRect(0, 0, canvasRight.width, canvasRight.height);

    ctxRight.strokeStyle = 'rgba(102, 126, 234, 0.5)';
    ctxRight.lineWidth = 2;

    for (let i = 0; i < 20; i++) {
      ctxRight.beginPath();
      const x = Math.random() * canvasRight.width;
      const y = Math.random() * canvasRight.height;
      ctxRight.moveTo(x, y);
      ctxRight.lineTo(x + Math.random() * 100, y + Math.random() * 100);
      ctxRight.stroke();
    }

    for (let i = 0; i < 5; i++) {
      ctxRight.beginPath();
      ctxRight.arc(
          Math.random() * canvasRight.width,
          Math.random() * canvasRight.height,
          Math.random() * 30 + 10,
          0,
          Math.PI * 2
      );
      ctxRight.stroke();
    }
  }

  drawPattern();
});
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Arial', sans-serif;
  position: relative;
  z-index: 1;
}

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.login-box {
  display: flex;
  width: 900px;
  height: 600px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

.login-form {
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-image {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#canvas-right {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 28px;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.input-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

input:focus {
  border-color: #667eea;
  outline: none;
}

button {
  width: 100%;
  padding: 12px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

button:hover {
  background: #764ba2;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.button-text {
  margin-right: 10px;
}

.button-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.button-icon.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.toggle-mode {
  margin-top: 20px;
  text-align: center;
}

.toggle-mode a {
  color: #667eea;
  text-decoration: none;
  transition: color 0.3s ease;
}

.toggle-mode a:hover {
  color: #764ba2;
}

@media (max-width: 768px) {
  .login-box {
    flex-direction: column;
    width: 90%;
    height: auto;
  }

  .login-image {
    display: none;
  }
}
</style>